<template>
    <div>
        <el-form
            ref="formRef"
            :model="posterInfo"
            :rules="rules"
            label-width="120px"
            :disabled="props.disabled"
            class="poster-setting">
            <aside class="form-title">分享海报设置</aside>
            <el-form-item id="posterFormItem" label="海报图片" prop="poster_type">
                <el-radio-group v-model="posterInfo.poster_type">
                    <el-radio :label="0">默认海报</el-radio>
                    <el-radio :label="1">海报库</el-radio>
                    <el-radio :label="2">本地上传</el-radio>
                </el-radio-group>

                <single-upload
                    v-show="posterInfo.poster_type === 2"
                    v-model="posterInfo.local_absolute_url"
                    accept=".jpg,.png,.jpeg"
                    size="2048"
                    label="重新添加"
                    :disabled="props.disabled"
                    @upload-after="handleUploadAfter">
                    <template #tip> 支持jpg、jpeg、png格式图片，大小不超过2M，建议尺寸720*1280 </template>
                </single-upload>
                <div v-show="posterInfo.poster_type === 1">
                    <div class="select-poster-box">
                        <div
                            class="select-poster-box-content"
                            :class="{ 'select-poster-box-content-border': posterInfo.poster_absolute_url }"
                            @click="openSelectPoster">
                            <img
                                v-if="posterInfo.poster_absolute_url"
                                class="img"
                                :src="posterInfo.poster_absolute_url"
                                alt="" />
                            <div v-if="!props.disabled">
                                <div v-if="posterInfo.poster_absolute_url" class="desc">重新添加</div>
                                <div v-else class="el-upload el-upload--picture-card">
                                    <div class="img-icon">
                                        <el-icon><Plus /></el-icon>
                                        <span class="tip-text">添加图片</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="tip-text">支持jpg、jpeg、png格式图片，大小不超过2M，建议尺寸720*1280</div>
                    </div>
                    <Teleport to="body">
                        <choose-poster ref="choosePosterRef" @save="submitSelectPoster" />
                    </Teleport>
                </div>
                <div v-show="posterInfo.poster_type === 0" class="default-poster-box">
                    <img :src="props.defaultUrl" />
                </div>
            </el-form-item>
            <el-form-item label="用户头像" class="form-switch-item">
                <el-switch
                    v-model="posterInfo.avatar_flag"
                    :active-value="1"
                    :inactive-value="2"
                    class="poster-switch" />
                <el-radio-group v-model="posterInfo.avatar_type" class="poster-form-item">
                    <el-radio :label="2">方形</el-radio>
                    <el-radio :label="1">圆形</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="用户昵称" class="nickname-switch">
                <el-switch
                    v-model="posterInfo.nickname_flag"
                    :active-value="1"
                    :inactive-value="2"
                    class="poster-switch" />
                <div v-show="!isOpen(posterInfo.nickname_flag)" class="poster-form-item">
                    <span>颜色</span>
                    <el-color-picker
                        v-model="posterInfo.nickname_color"
                        :predefine="predefineColors"
                        popper-class="poster-setting-color-picker" />
                    <span>字体大小</span>
                    <el-select v-model="posterInfo.nickname_size" :teleported="false" class="form-select">
                        <!-- 字体大小:  10 ~ 30 -->
                        <el-option
                            v-for="sizeItem in 21"
                            :key="sizeItem + 9"
                            :label="sizeItem + 9"
                            :value="sizeItem + 9" />
                    </el-select>
                </div>
            </el-form-item>
            <el-form-item label="描述" class="form-switch-item">
                <el-switch
                    v-model="posterInfo.desc_flag"
                    :active-value="1"
                    :inactive-value="2"
                    class="poster-switch"
                    @change="handleChangeDescFlag" />
                <div v-show="!isOpen(posterInfo.desc_flag)" class="poster-form-item">
                    <span>颜色</span>
                    <el-color-picker
                        v-model="posterInfo.desc_color"
                        :predefine="predefineColors"
                        popper-class="poster-setting-color-picker" />
                    <span>字体大小</span>
                    <el-select v-model="posterInfo.desc_size" :teleported="false" class="form-select">
                        <!-- 字体大小:  10 ~ 30 -->
                        <el-option
                            v-for="sizeItem in 21"
                            :key="sizeItem + 9"
                            :label="sizeItem + 9"
                            :value="sizeItem + 9" />
                    </el-select>
                </div>
                <!-- <div v-show="!isOpen(posterInfo.desc_flag)">
                <el-input
                    v-model="posterInfo.desc"
                    type="textarea"
                    maxlength="500"
                    :rows="5"
                    show-word-limit
                    class="poster-desc-item"
                    placeholder="请输入描述文案" />
            </div> -->
            </el-form-item>
            <el-form-item
                v-show="!isOpen(posterInfo.desc_flag)"
                label=""
                class="form-switch-item form-poster-desc"
                prop="desc">
                <el-input
                    v-model="posterInfo.desc"
                    type="textarea"
                    maxlength="500"
                    :rows="5"
                    show-word-limit
                    class="poster-desc-item"
                    placeholder="请输入描述文案" />
            </el-form-item>
        </el-form>
    </div>
</template>
<script lang="ts" setup>
import { reactive, ref, computed, onUnmounted, watch } from 'vue';
import { FormRules, FormInstance } from 'element-plus';
import choosePoster from '@/view/content/highMaterial/poster/components/ChoosePoster.vue';

import singleUpload from '../award-settings/components/prize-from-dialog/single-upload.vue';

import { isOpen } from './utils/index';
import { formParams, setPosterFormParams, initFormParams } from './utils/paramsManager';
import { IFormParams } from './utils/interface';

const emit = defineEmits(['update:modelValue', 'changePosterAfter']);

const props = defineProps({
    modelValue: {
        type: Object,
        default: () => {}
    },
    defaultUrl: {
        type: String,
        default: ''
    },
    /** 是否被禁用 */
    disabled: {
        type: Boolean,
        default: false
    }
});

const posterInfo: any = computed({
    get() {
        return props.modelValue;
    },
    set(val) {
        emit('update:modelValue', val);
    }
});

watch(
    () => posterInfo.value.poster_type,
    val => {
        if (val === 1) {
            posterInfo.value.absolute_url = posterInfo.value.poster_absolute_url;
        } else if (val === 2) {
            posterInfo.value.absolute_url = posterInfo.value.local_absolute_url;
        } else {
            posterInfo.value.absolute_url = props.defaultUrl;
        }
        formRef.value?.clearValidate('poster_type');
    }
);

/**
 * 切换描述开关时清空校验
 */
const handleChangeDescFlag = () => {
    formRef.value?.clearValidate('desc');
};

const formRef = ref<FormInstance>();

// 校验海报背景
const checkPoster = (rule: any, value: any, callback: any) => {
    if (posterInfo.value.poster_type === 2 && !posterInfo.value.local_absolute_url) {
        return callback(new Error('请选择海报图片'));
    }

    // 海报库的情况下选择海报校验id
    if (posterInfo.value.poster_type === 1 && !posterInfo.value.poster_id) {
        return callback(new Error('请选择海报图片'));
    }
    callback();
};

const checkDesc = (rule: any, value: any, callback: any) => {
    if (posterInfo.value.desc_flag === 1 && !posterInfo.value.desc) {
        return callback(new Error('请输入描述文案'));
    }
    callback();
};

const rules = reactive<FormRules>({
    poster_type: [{ required: true, validator: checkPoster, trigger: 'blur' }],
    desc: [{ required: true, validator: checkDesc, trigger: 'change' }]
});
//请输入描述文案

/**
 * 校验分享设置表单
 */
const validate = async () => {
    return await formRef.value?.validate();
};

/**
 * @description 海报ref实例化
 */
const choosePosterRef = ref();

/**
 * @description 打开选择海报弹窗
 */
const openSelectPoster = () => {
    if (props.disabled) {
        return;
    }
    choosePosterRef.value.appDialog.visible = true;
};

/**
 * @description 确认选择海报
 */
const submitSelectPoster = (val: any) => {
    const {
        list: [poster]
    } = val;
    posterInfo.value.absolute_url = poster.poster_url;
    posterInfo.value.poster_id = poster.id;
    posterInfo.value.poster_absolute_url = poster.poster_url;
    // 告诉顶部海报发生了变更。通知样机组件库。进行绘图上传图片
    emit('changePosterAfter', poster.poster_url);
};

/**
 * 本地上传成功之后.通知样机组件库。进行绘图上传图片
 * @param url 上传的海报地址
 */
const handleUploadAfter = (url: string) => {
    emit('changePosterAfter', url);
    posterInfo.value.absolute_url = posterInfo.value.local_absolute_url;
};

const getFormParams = async () => {
    const res = await formRef.value?.validate();
    if (!res) {
        return false;
    }
    return posterInfo;
};

onUnmounted(() => {
    // 组件销毁后初始化params
    initFormParams();
});

/**
 * 预定颜色
 */
const predefineColors = reactive([
    '#C80009',
    '#99004F',
    '#510E93',
    '#0046A7',
    '#006564',
    '#006112',
    '#837800',
    '#FF6B00',
    '#D21F00',
    '#000000',
    '#E70A20',
    '#D8005D',
    '#8414A8',
    '#0079D9',
    '#008B7F',
    '#00912C',
    '#AFB500',
    '#FFA500',
    '#F43C00',
    '#333333',
    '#FF2523',
    '#FF0061',
    '#AA18B8',
    '#009AF8',
    '#009988',
    '#00B342',
    '#CADC00',
    '#FFCD00',
    '#FF4400',
    '#666666',
    '#F9686F',
    '#FF8AB2',
    '#D690DE',
    '#7ECCFD',
    '#64CFC3',
    '#98D8A6',
    '#E6ED92',
    '#FFE481',
    '#FFA595',
    '#999999',
    '#FFCBD2',
    '#FFB8D1',
    '#E9BBEA',
    '#B3E0FB',
    '#A5E2DC',
    '#C0E7C8',
    '#F0F4C0',
    '#FFEFB2',
    '#FFCAB7',
    '#CCCCCC',
    '#FFE9ED',
    '#FFE4EC',
    '#F6E4F6',
    '#DEF3FE',
    '#DCF3F2',
    '#E2F7EB',
    '#FAFBE4',
    '#FFF7DC',
    '#FFE8E9',
    '#FFFFFF'
]);

defineExpose({
    validate,
    getFormParams
});
</script>
<style lang="scss" scoped src="./style.scss"></style>
